/**
 *
 * 注册框
 */

'use strict';
var React = require('react');
var ReButton = require('./ReButton.jsx');
var md5=require('../../library/md5.js');
var ReMsgButton=require('./ReMsgButton.jsx');
var ReDialog = require('./ReDialog.jsx');
var ReLoading=require('./ReLoading.jsx');
class HkfsRegister extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            pwd: '',
            msgCode: '',
            recommendCode: '',
            agree:true,
            checkMsg: {
                name: '请输入正确的手机号码',
                pwd: '请输入六位到十二位密码',
                msgCode: '请输入正确验证码',
                recommendCode: '输入正确的推荐码'
            },
            checkPattern: {
                name: '(^[\\d]{11}$)',
                pwd: '(^[\\d\\w]{6,12}$)',
                msgCode: '(^[\\d]{6}$)',
                recommendCode: '((^[\\d]{11}$)|(^[\\d]{0}$))'
            },
            checkResult: {
                name: true,
                pwd: true,
                msgCode: true,
                recommendCode: true
            }
        };
        this.setOption = this.setOption.bind(this);
        this.checkItems = this.checkItems.bind(this);
        this.getErrorMsgClass=this.getErrorMsgClass.bind(this);
        this.getMsgCode=this.getMsgCode.bind(this);
        this.setCheckOption=this.setCheckOption.bind(this);
        this.register=this.register.bind(this);
    }

//检测数据
    checkItems() {
        var items = Object.keys(this.state.checkPattern);
        var obj={};
        obj.checkResult=Object.assign({},this.state.checkResult);
        for (var i = 0; i < items.length; i++) {
            var patternTest = new RegExp(this.state.checkPattern[items[i]], "i");
            if (patternTest.test(this.state[items[i]])) {
                obj.checkResult[items[i]]=true;
            }
            else {
                obj.checkResult[items[i]]=false;
            }
        }
        this.setState(obj);
        //state有可能尚未更新，用state来检测可能会出错，此处提前将检测结果返回供检测函数调用
        return obj;
    }

    //输入值改变
    setOption(objName,event) {
        var obj = {};
        obj[objName] = event.target.value;
        setTimeout(()=>{
            this.setState(obj);
        },0);
    }

    setCheckOption(event){
        this.setState({
            agree:event.target.checked
        })
    }

    getMsgCode() {
        var result=this.checkItems();
        if (result.checkResult.name) {
           reqwest({
               url: '/api/getMsgCode?mobile=' + this.state.name,
               method: 'get',
               contentType: 'application/json'
           })
               .then(function (data) {
                   console.log('sdf');
               })
               .fail(function (err, msg) {
                   alert('获取数据出错');
               });
            return true;
       }
        return false;
    }

    getErrorMsgClass(hide){
        if(hide){
            return 'hide';
        }
        else{
            return 'normal'
        }
    }


    register(){
        var checkResult=this.checkItems().checkResult;
        if(checkResult.name&&checkResult.pwd&&checkResult.recommendCode&&checkResult.msgCode&&this.state.agree) {
            ReLoading.showLoading();
            reqwest({
                url: '/api/registUser',
                method: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    name: this.state.name,
                    pwd: md5.hex_md5(this.state.pwd),
                    recommendCode: this.state.recommendCode,
                    msgCode: this.state.msgCode
                })
            })
                .then(function (data) {
                    ReLoading.hideLoading();
                    var result = data;
                    if (result.resultCode=='200') {
                        sessionStorage.setItem('HkfsUserPhone', result.result.name);
                        var style1={
                            marginTop:'100px'
                        };
                        var style2={
                            color:'#be091b',
                            fontSize:'20px',
                            lineHeight:'30px'
                        };
                        var style3={
                            color:'#666666',
                            fontSize:'14px',
                            marginTop:'44px'
                        };
                        ReDialog.showDialog({
                            title: '',
                            isOk:false,
                            content: <div style={style1}><div style={style2}>恭喜您，注册成功！</div><div style={style3}>您的登录账号是{result.result.name},10秒后自动登录并跳转到登录页面</div></div>,
                            isMask: true,
                            isCancel: false,
                            dialogWidth: '640px',
                            dialogHeight: '400px',
                            result: (result)=> {
                                location.href = '/login';
                            }
                        });
                        setTimeout(()=> {
                            location.href = '/login';
                        }, 10000);
                    }
                    else{
                        ReLoading.hideLoading();
                        ReDialog.showDialog({
                            title: '',
                            ok: '确定',
                            content: result.msg,
                            isMask: true,
                            isCancel: false,
                            result: (result)=> {
                            }
                        });
                    }
                })
                .fail(function (err, msg) {
                    ReDialog.showDialog({
                        title: '',
                        ok: '确定',
                        content: '获取数据发生错误，请稍后再试！',
                        isMask: true,
                        isCancel: false,
                        result: (result)=> {
                        }
                    });
                });
        }
    }


    render() {
        return <div className="HkfsRegisterContainer">
            <div className="HkfsRegisterTitle">免费注册，立享专属会员投资服务</div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="redStar">*</span><span className="itemName">手机号码</span>
                    </div>
                    <input placeholder="请输入手机号码" className="commonInput longInput"
                           onChange={this.setOption.bind(this,'name')} onBlur={this.checkItems}/>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.name)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.name}</span></div>
            </div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="redStar">*</span><span className="itemName">密码</span>
                    </div>
                    <input type="password" placeholder="设置登录密码" className="commonInput longInput"
                           onChange={this.setOption.bind(this,'pwd')}  onBlur={this.checkItems}/>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.pwd)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.pwd}</span></div>
            </div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="redStar">*</span>
                        <span className="itemName">短信验证码</span>
                    </div>
                    <input placeholder="短信验证码" className="commonInput shortInput"
                           onChange={this.setOption.bind(this,'msgCode')}  onBlur={this.checkItems}/>
                    <ReMsgButton reButtonClick={this.getMsgCode} reClass="messageButton" count={120}>获取验证码</ReMsgButton>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.msgCode)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.msgCode}</span></div>
            </div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="itemName">推荐人</span>
                    </div>
                    <input placeholder="请输入推荐人手机号码（选填）" className="commonInput longInput"
                           onChange={this.setOption.bind(this,'recommendCode')}  onBlur={this.checkItems}/>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.recommendCode)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.recommendCode}</span></div>
            </div>
            <div className="noButtom">
                <div className="itemTitleDiv"></div>
                <input checked={this.state.agree} id="checkAgree" type="checkbox"  onChange={this.setCheckOption}/><span>我已阅读并同意<a target="_blank"  href="/hkfsDetail?id=2">《华财通注册服务协议》</a></span>
            </div>
            <div className="warnning">
                <div className="itemTitleDiv"></div>
                <span className={this.getErrorMsgClass(this.state.agree)}>请阅读并同意华财通注册服务协议</span>
            </div>
            <ReButton reClass="registerButton"  reButtonClick={this.register}>注册送加息券</ReButton>
            <div className="gotoLogin">
                <span>已有账户，</span><a href="/login">立即登录</a>
            </div>
            <ReDialog/>
            <ReLoading></ReLoading>
        </div>
    }
}

module.exports = HkfsRegister;
